<script setup lang="ts">
import { useArticleStore } from "@/stores/article";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import indexedDB from "@/services/index";

const router = useRouter();
const articleStore = useArticleStore();
const { openArticles } = storeToRefs(articleStore);

onMounted(async () => {
  try {
    await indexedDB.openDB();
    console.log("数据库初始化完成");
  } catch (error) {
    console.error("数据库初始化失败:", error);
  }
});

// 监听打开的文章列表
watch(openArticles, (articles) => {
  if (articles.length === 0) {
    router.push("/");
  } else {
    router.push("/editor");
  }
});
</script>

<template>
  <router-view />
</template>

<style>
/* 消息提示框样式 */
.el-message {
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 300px !important;
  z-index: 9999 !important;
}

/* 弹窗遮罩层 */
.el-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

/* 弹窗容器 */
.el-message-box__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  z-index: 2001;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗内容 */
.el-message-box {
  display: inline-block;
  padding: 15px;
  width: auto;
  margin: 0;
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
